// variables.scss
$base-font-size: 24rpx !default;
$spacing-unit: 10rpx !default;
$color-primary: #007aff !default;
$colors: () !default;

/* #ifndef APP-NVUE */
body {
	background-color: #f1f1f1;
	font-size: 28rpx;
	color: #333333;
	font-family: PingFang SC Medium;
}

page {
	min-height: 100%;
	background-color: #f1f1f1;
}

view,
text,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
	box-sizing: border-box;
}

/* 固定宽度 */
.w-full {
  width: 100%;
}

.w-1-2 {
  width: 50%;
}

.w-1-3 {
  width: 33.3333%;
}

.w-2-3 {
  width: 66.6667%;
}

.w-1-4 {
  width: 25%;
}

.w-1-5 {
  width: 20%;
}

/* #endif */

// functions.scss
@function to-rpx($value) {
    @return $value * 1rpx;
}

@function spacing($multiplier: 1) {
    @return $spacing-unit * $multiplier;
}

// flex布局
@mixin flex-container($direction: row, $wrap: nowrap) {
    display: flex;
    flex-direction: $direction;
    flex-wrap: $wrap;
}
// 文字省略
@mixin text-ellipsis($lines: 1) {
    @if $lines == 1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    } @else {
		/* #ifndef APP-NVUE */
		display: -webkit-box;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* #endif */
    }
}

// Flex 布局类
.f-container {
    @include flex-container();

    &-column {
        @include flex-container(column);
    }
    
    &-row {
        @include flex-container(row);
    }

    &-wrap {
        flex-wrap: wrap;
    }

    &-center {
        justify-content: center;
        align-items: center;
    }
}

.f-item {
    &-flex1 {
        flex: 1;
    }
	/* #ifndef APP-NVUE */
	&-shrink0 {
	    flex-shrink: 0;
	}
	/* #endif */
}

// Flex 布局公共类
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

/* #ifndef APP-NVUE */
.align-baseline {
  align-items: baseline;
}
/* #endif */

.align-stretch {
  align-items: stretch;
}

.flex-row-flex1{
    flex: 1;
    width: 0;
}

.flex-column-flex1{
    flex: 1;
    height: 0;
}


// ========== 基础尺寸变量定义 ==========
// 文字大小（基于rpx，适配移动端）
$font-sizes: (
  'xs': 22rpx,
  'sm': 24rpx,
  'base': 28rpx,
  'lg': 32rpx,
  'xl': 36rpx,
  '2xl': 40rpx,
  '3xl': 48rpx
);

// 行高
$line-heights: (
  'tight': 1.2,
  'base': 1.5,
  'loose': 1.8
);

// 边框宽度
$border-widths: (
  'sm': 1rpx,
  'base': 2rpx,
  'lg': 3rpx
);

// 边框圆角
$radii: (
  'none': 0rpx,
  'xs': 4rpx,
  'sm': 8rpx,
  'base': 12rpx,
  'lg': 16rpx,
  'xl': 24rpx,
  'circle': 50%
);

// 间距（margin/padding通用，8px网格系统）
$spacings: (
  '0': 0rpx,
  'xs': 4rpx,
  'sm': 8rpx,
  'md': 16rpx,
  'lg': 24rpx,
  'xl': 32rpx,
  '2xl': 48rpx
);


// ========== 2. 自动生成class类 ==========
// 文字大小类：.text-xs, .text-base...
@each $name, $size in $font-sizes {
  .font-#{$name} {
    font-size: $size !important;
  }
}

// 行高类：.line-tight, .line-base...
@each $name, $height in $line-heights {
  .line-#{$name} {
    line-height: $height !important;
  }
}

// 边框宽度类：.border, .border-sm...
.border {
  border-width: map-get($border-widths, 'base') !important;
  border-style: solid !important;
}
@each $name, $width in $border-widths {
  .border-#{$name} {
    border-width: $width !important;
    border-style: solid !important;
  }
}

// 边框圆角类：.rounded, .rounded-sm...
.rounded {
  border-radius: map-get($radii, 'base') !important;
}
@each $name, $radius in $radii {
  .rounded-#{$name} {
    border-radius: $radius !important;
  }
}

// 间距类（通用）：.m-sm（margin）, .p-md（padding）
@each $name, $spacing in $spacings {
  // margin
  .m-#{$name} {
    margin: $spacing !important;
  }
  // margin-top
  .mt-#{$name} {
    margin-top: $spacing !important;
  }
  // margin-bottom
  .mb-#{$name} {
    margin-bottom: $spacing !important;
  }
  // margin-left
  .ml-#{$name} {
    margin-left: $spacing !important;
  }
  // margin-right
  .mr-#{$name} {
    margin-right: $spacing !important;
  }
  // margin-x（左右）
  .mx-#{$name} {
    margin-left: $spacing !important;
    margin-right: $spacing !important;
  }
  // margin-y（上下）
  .my-#{$name} {
    margin-top: $spacing !important;
    margin-bottom: $spacing !important;
  }

  // padding
  .p-#{$name} {
    padding: $spacing !important;
  }
  .pt-#{$name} {
    padding-top: $spacing !important;
  }
  .pb-#{$name} {
    padding-bottom: $spacing !important;
  }
  .pl-#{$name} {
    padding-left: $spacing !important;
  }
  .pr-#{$name} {
    padding-right: $spacing !important;
  }
  .px-#{$name} {
    padding-left: $spacing !important;
    padding-right: $spacing !important;
  }
  .py-#{$name} {
    padding-top: $spacing !important;
    padding-bottom: $spacing !important;
  }
}

// 间距类（生成示例）
$spacing-directions: (
    t: top,
    r: right,
    b: bottom,
    l: left
);
@for $i from 0 through 100 {
    // 边距
    .m-#{$i} {
        margin: to-rpx($i) !important;
    }
    .p-#{$i} {
        padding: to-rpx($i) !important;
    }

    @each $abbr, $dir in $spacing-directions {
        // 各方向边距
        .m-#{$abbr}-#{$i} {
            margin-#{$dir}: to-rpx($i) !important;
        }
        .p-#{$abbr}-#{$i} {
            padding-#{$dir}: to-rpx($i) !important;
        }
    }
}
/* #ifndef APP-NVUE */
.m-auto{
    margin: auto !important;
}
@each $abbr, $dir in $spacing-directions {
    // 各方向边距自动
    .m-#{$abbr}-auto {
        margin-#{$dir}: auto !important;
    }
}
/* #endif */


// 字体类
@for $i from 12 through 100 {
    .font-#{$i} {
        font-size: to-rpx($i) !important;
    }
}

.font-w-bold {
    font-weight: bold !important;
}

.font-w-normal {
    font-weight: normal !important;
}

// 工具类
.text {
    &-left {
        text-align: left;
    }
    &-center {
        text-align: center;
    }
    &-right {
        text-align: right;
    }
	/* #ifndef APP-NVUE */
	&-ellipsis {
	    @include text-ellipsis();
	}
	&-ellipsis-2 {
	    @include text-ellipsis(2);
	}
	/* #endif */
    
}


// 绝对定位
@mixin absolute-position($top: null, $right: null, $bottom: null, $left: null) {
   position: absolute;
   top: $top;
   right: $right;
   bottom: $bottom;
   left: $left;
}

// 绝对定位居中
@mixin absolute-position-center($top: 50%, $left: 50%) {
   position: absolute;
   top: $top;
   left: $left;
   transform: translate(-50%, -50%);
}